<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/shop_head.css" />
		<script src="js/jquery1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				background-image: url(img/payfor/pay_body_list_head.png);
			}
			
			#pay {
				width: 920px;
				height: 600px;
				border: 1px solid #999;
				margin: 50px auto;
				background-color: white;
			}
			
			#pay_1 h4 {
				padding-left: 50px;
				padding-top: 30px;
			}
			
			#pay_2 {
				margin: 0px 50px 0px 50px;
				border: 2px solid #999;
				height: 400px;
				padding: 40px;
			}
			
			#pay_2 table {
				width: 740px;
				text-align: center;
				border-top: 1px solid #A1A1A1;
				border-left: 1px solid #A1A1A1;
				line-height: 40px;
				table-layout: fixed;
			}
			
			#pay_2 table tr:first-child {
				background-color: #B2B2B2;
				font-weight: bold;
			}
			
			#pay_2 table td {
				border-bottom: 1px solid #A1A1A1;
				border-right: 1px solid #A1A1A1;
			}
			
			.pay_202 {
				position: relative;
				top: 50px;
				width: 750px;
			}
			
			hr {
				margin-top: 70px;
			}
			
			#pay_2>.pay_201 .paylist_name {
				width: 200px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
	</head>

	<body>
		<div id="shop_head">
			<div id="base_top_bg">
				<div class="base_top_navDiv">
					<div class="base_top_logo" onclick="location.href='index.html'"></div>

					<ul class="base_top_nav">
						<li class="w42" id="index_dl">登录</li>
						<li class="w40" id="index_tcdl" onclick="location.href='register.html'"></li>
						<li class="w40" onclick="location.href='shop.html'"></li>
						<li class="w56" id="base_gwc">购物车</li>
						<li></li>
						<li class="w40"></li>
						<li class="w40"></li>
						<li class="w40"></li>
					</ul>
					<div id="base_dlcg"></div>

					<img class="base_weixin" src="img/index/index_weixin1.png" />
					<img class="base_weibo" src="img/index/index_weibo1.png" />
					<img class="base_weitao" src="img/index/index_weitao1.png" />
				</div>
			</div>
			<ul id="base_leftAdd_content">
				<li>
					<a href="news.html">资讯</a>
				</li>
				<li>
					<a href="join.html">加盟</a>
				</li>
				<li>
					<a href="job.html">纳贤</a>
				</li>
				<li>
					<a href="woker.html">匠人</a>
				</li>
				<li>
					<a href="cooperation.html">合作</a>
				</li>
				<li>
					<a href="actor.html">选角</a>
				</li>
				<li>
					<a href="media.html">媒体</a>
				</li>
			</ul>
			<div id="base_leftAdd">
				<span></span>
			</div>
			<!--模拟客服开始-->
			<div id="top"></div>
			<div id="main">
				<span id="base_guanbi"></span>
				<div id="txt">花笙记客服代表</div>
				<div id="show">
					<span class="show_span">很高兴为您服务！</span>
				</div>
				<input type="text" name="text" id="text" value="" />
				<input type="button" style="cursor: pointer;" id="send" value="发送" />
			</div>
			<!--模拟客服结束-->
		</div>
		<div id="shop_nav">
			<div id="shop_nav_icon">
				<ul id="img_icon">
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
					<li><span class="zhen"></span><span class="fan"></span></li>
				</ul>
				<ul id="font_icon">
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list1">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span></li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
					<li><span class="font_zhen"></span><span class="font_fan"></span>
						<ul class="font_icon_list font_icon_list2">
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
							<li>
								<a><span class="list_zhen"></span><span class="list_fan"></span></a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div id="pay">
			<div id="pay_1">
				<h4>请确认信息后完成支付</h4>
			</div>
			<div id="pay_2">
				<div class="pay_201">
					<h3>交易信息：</h3>
					<table cellspacing="0" cellpadding="0">
						<tr>
							<td>交易类型</td>
							<td>商品名称</td>
							<td>单价</td>
							<td>数量</td>
							<td>实收金额</td>
						</tr>
						<tr>
							<td>担保交易</td>
							<td class="paylist_name"></td>
							<td class="paylist_price1"></td>
							<td class="paylist_num"></td>
							<td class="paylist_price2"></td>
						</tr>
					</table>
				</div>
				<hr />
				<div class="pay_202">
					<h3>请选择交易方式：</h3>
					<a href="javascript:;"><img src="img/payfor/payzhifubao.png" /></a>
					<a href="javascript:;"><img src="img/payfor/payweixin.png" /></a>
					<a href="javascript:;"><img src="img/payfor/payxianjin.png" /></a>
				</div>
			</div>
		</div>
		<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/shop_head.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function init() {
				var APP_ID = 'c4w6bVvWfh8xxcmkBE1G0gIt-gzGzoHsz';
				var APP_KEY = 'JBikg4Ksk76zcTi5BKYWvTJF';
				AV.init({
					appId: APP_ID,
					appKey: APP_KEY
				});
			}
			init();
			/*此处变量为创建购物车表做准备*/
			function settab() {
				var query = new AV.Query('HSJ_product');
				query.descending('createdAt');
				var obid = getidurl("id"); //商品id
				query.get(obid).then(function(products) {
					$(".paylist_name").html(products.attributes.title);
					$(".paylist_name").attr("title",products.attributes.title);
					$(".paylist_price1").html("￥" + products.attributes.price);
					$(".paylist_num").html("1");
					$(".paylist_price2").html("￥" + (1 * products.attributes.price));
					$(".pay_202>a").each(function(){
						$(this).click(function(){
							$(this).attr("href","payfor2.html?price="+products.attributes.price);
						})
					})
				}).catch(function(error) {
					console.log(JSON.stringify(error));
				});

			}
			settab();

			function getidurl(name) {
				var myurl = location.search;
				var start = myurl.indexOf(name + "=");
				if(start != -1) {
					start = start + name.length + 1;
					var end = myurl.indexOf("&", start);
					if(end == -1) {
						end = myurl.length;
					}
					return unescape(myurl.substring(start, end));
				}
			}
		</script>
	</body>

</html>